<template>
    <div class="singer">
        <!-- 歌手分类 -->
        <singer-category
            :singer-category="SingerCategory"
            @category-click="fetchSingerList"
        />
    <!-- 歌手列表 -->
        <singer-list
            :list="SingerList"
        />
    </div>
</template>

<script>
import SingerCategory from '../components/main/singer/SingerCategory'
import SingerList from '../components/main/singer/SingerList'


export default {
    data(){
        return{
            SingerCategory:{},
            SingerList:[]
        }
    },
    methods:{
        // 获取歌手分类
        async fetchSingerCategory(){
            const {data:{data:category}} = await this.$http.get('/singer/category');
            // console.log(res.data);
            this.SingerCategory={
                sex:category.sex,
                area:category.area,
                genre:category.genre
            }
            console.log(this.SingerCategory);
        },
    // 获取歌手列表
    async fetchSingerList(params){
        this.SingerList = []
        const res = await this.$http.get('/singer/list',{
            params
        })
        console.log(res)
        this.SingerList = res.data.data.list
    }
    },
    created(){
        this.fetchSingerCategory();
        this.fetchSingerList();
    },
    components:{
        SingerCategory,
        SingerList
    }
}
</script>